<head>
    <link rel="stylesheet" href="./userinfo.css">
</head>

<body style="scale: 1;">
    <div class="background">
        <img src="../../original_ill/ill/ぱぴぷぴぷぴぱ.ころねぽちWith立秋.png" alt="{{background}}">
    </div>
    <div class="left">
        <div class="Player_Info">
            <p>PLAYER_INFO</p>
        </div>
        <div class="Player_Info-after"></div>
        <div class="basic-box">
            <div class="basic-img">
                <img src="../../original_ill/ill/ぱぴぷぴぷぴぱ.ころねぽちWith立秋.png" alt="{{gameuser.backgroundurl}}">
            </div>
            <div class="Player_Id">
                <div class="avatar">
                    <img src="../avatar/Aphasia.png" alt="{{avatar}}">
                </div>
                <div class="Player_Id-box">
                    <div class="Player_Id-left">
                        <p>ID</p>
                    </div>
                    <div class="Player_Id-right">
                        <p id="Player_Id">
                            就是不会告诉你</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="left_title">
            <div class="left_title-left">
                <p>PLAYER_DETAIL</p>
            </div>
        </div>
        <div class="Player_data_line">
            <div class="Player_data_line-left">
                <div class="Player_data_title" id="Player_data_left">
                    <p>RKS</p>
                </div>
                <div class="Player_data_value" id="Player_data_left">
                    <p>14.6578</p>
                </div>
            </div>
            <div class="Player_data_line-right">
                <div class="Player_data_title" id="Player_data_right">
                    <p>CLG MOD</p>
                </div>
                <div class="Challenge" id="Challenge2">
                    <img src="../otherimg/5.png" alt="{{ChallengeMode}}">
                    <span>54</span>
                </div>
                <div class="Player_data_value CLG colorful" id="Player_data_right">
                    <p id="CLG">-0th Dan-/v3.2.0</p>
                </div>
            </div>
        </div>
        <div class="Player_data_box" id="data_box">
            <div class="Player_box_title">
                <p>DATA</p>
            </div>
            <div class="Player_box_value">
                <p id="data">1PiB 1TiB 1GiB 1MiB 1KiB</p>
            </div>
        </div>
        <div class="Player_profile_box">
            <font color='white' id="profile">{{#gameuser.selfIntro.replace(/\n\r?/g,'<br>')}}</font>
        </div>
        <div class="createdbox">
            <div class="phi-plugin">
                <p>{{_plugin}}</p>
            </div>
            <div class="ver">
                <p>{{Version.ver}}</p>
            </div>
        </div>
    </div>
    <div class="right">
        <div class="file-content">
            <div class="file-content-left">
                <p>PLAYER_DATA</p>
            </div>
        </div>
        <div class="data_title">
            <div class="data_title-left">
                <p>RKS_HISTORY</p>
            </div>
        </div>
        <div class="svg-box">
            <div class="value_box">
                <p>20GiB</p>
                <p>10MiB</p>
            </div>
            <div class="line-box">
                <div class="line">
                    <svg>
                        <defs>
                            <marker id="dot" viewBox="0 0 10 10" markerWidth="8" markerHeight="8" refX="2" refY="2">
                                <circle cx="2" cy="2" r="1">2333</circle>
                            </marker>
                            <linearGradient id="linear-gradient" x1="0%" y1="100%" x2="0%" y2="0%">
                                <stop offset="0%" stop-color="#87ceebff" />
                                <stop offset="100%" stop-color="#87ceeb00" />
                            </linearGradient>
                        </defs>
                        <path
                            d="M 0 0 L 109.06125 156.854 L 218.1225 39.146 L 327.18375 124.596 L 436.245 117.674 L 545.30625 142.085 L 654.3675 31.362 L 762.5 46.757 L 762.5 0"
                            stroke="#00000000" fill="url(#linear-gradient)">
                        </path>

                        <line x1="0" y1="0" x2="109.06125" y2="156.854"></line>
                        <line x1="109.06125" y1="156.854" x2="218.1225" y2="39.146"></line>
                        <line x1="218.1225" y1="39.146" x2="327.18375" y2="124.596"></line>
                        <line x1="327.18375" y1="124.596" x2="436.245" y2="117.674"></line>
                        <line x1="436.245" y1="117.674" x2="545.30625" y2="142.085"></line>
                        <line x1="545.30625" y1="142.085" x2="654.3675" y2="31.362"></line>
                        <line x1="654.3675" y1="31.362" x2="762.5" y2="46.757"></line>
                    </svg>
                </div>
                <div class="date_box">
                    <p>2023/8/21 21:30</p>
                    <p>2023/8/21 21:30</p>
                </div>
            </div>
        </div>
        <div class="data_title">
            <div class="data_title-left">
                <p>DATA_HISTORY</p>
            </div>
        </div>
        <div class="svg-box">
            <div class="value_box">
                <p>20GiB</p>
                <p>10MiB</p>
            </div>
            <div class="line-box">
                <div class="line">
                    <svg>
                        <defs>
                            <marker id="dot" viewBox="0 0 10 10" markerWidth="8" markerHeight="8" refX="2" refY="2">
                                <circle cx="2" cy="2" r="1">2333</circle>
                            </marker>
                        </defs>
                        <line x1="0" y1="0%" x2="14.2857%" y2="100%"></line>
                        <line x1="14.2857%" y1="100%" x2="28.5714%" y2="25%"></line>
                        <line x1="28.5714%" y1="25%" x2="42.8571%" y2="80%"></line>
                        <line x1="42.8571%" y1="80%" x2="57.1428%" y2="75%"></line>
                        <line x1="57.1428%" y1="75%" x2="71.4286%" y2="90%"></line>
                        <line x1="71.4286%" y1="90%" x2="85.7143%" y2="20%"></line>
                        <line x1="85.7143%" y1="20%" x2="100%" y2="30%"></line>
                    </svg>
                </div>
                <div class="date_box">
                    <p>2023/8/21 21:30</p>
                    <p>2023/8/21 21:30</p>
                </div>
            </div>
        </div>
        <div class="data_title">
            <div class="data_title-left">
                <p>Limit-ACC_RKS</p>
            </div>
            <p>将您的成绩中所有 ACC *小于某一值（横坐标）* 的成绩筛去后计算得到的 RKS 值</p>
        </div>
        <div class="svg-box">
            <div class="value_box">
                <p>16.2</p>
                <p>16.1</p>
                <p>16.0</p>
                <p>15.9</p>
                <p>15.8</p>
            </div>
            <div class="line-box">
                <div class="line">
                    <svg>
                        <defs>
                            <marker id="dot" viewBox="0 0 10 10" markerWidth="8" markerHeight="8" refX="2" refY="2">
                                <circle cx="0" cy="0" r="0">2333</circle>
                            </marker>
                        </defs>
                        <line x1="0" y1="0%" x2="14.2857%" y2="100%"></line>
                        <line x1="14.2857%" y1="100%" x2="28.5714%" y2="25%"></line>
                        <line x1="28.5714%" y1="25%" x2="42.8571%" y2="80%"></line>
                        <line x1="42.8571%" y1="80%" x2="57.1428%" y2="75%"></line>
                        <line x1="57.1428%" y1="75%" x2="71.4286%" y2="90%"></line>
                        <line x1="71.4286%" y1="90%" x2="85.7143%" y2="20%"></line>
                        <line x1="85.7143%" y1="20%" x2="100%" y2="30%"></line>
                    </svg>
                    <div class="vis_dot_box">
                        <div class="vis_dot"></div>
                    </div>
                </div>
                <div class="date_box">
                    <p>100%</p>
                    <p>90%</p>
                    <p>80%</p>
                    <p>70%</p>
                    <p>60%</p>
                    <p>50%</p>
                </div>
            </div>
        </div>
        <div class="data_title">
            <div class="data_title-left">
                <p>STATS</p>
            </div>
        </div>
        <div class="stats-box">
            <div class="one-stats-box" id="FC">
                <div class="rank">
                    <p>AT</p>
                </div>
                <div class="stats-up">
                    <div class="Rating">
                        <img src="../otherimg/FC.png" alt="{{Rating}}">
                    </div>
                    <div class="stats-group">
                        <div class="stats-group-real">
                            <p>222</p>
                        </div>
                        <div class="stats-group-tot">
                            <p id="FCp">/222</p>
                        </div>
                    </div>
                    <div class="stats-rating-group">
                        <div class="rating-group">
                            <div class="rating-value">
                                <p>222</p>
                            </div>
                            <div class="rating-tatle">
                                <p id="FCp">Cleared</p>
                            </div>
                        </div>
                        <div class="rating-group">
                            <div class="rating-value">
                                <p>222</p>
                            </div>
                            <div class="rating-tatle">
                                <p id="FCp">FC</p>
                            </div>
                        </div>
                        <div class="rating-group">
                            <div class="rating-value">
                                <p>222</p>
                            </div>
                            <div class="rating-tatle">
                                <p id="FCp">PHI</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="stats-group">
                    <div class="stats-group-real">
                        <p>189000000</p>
                    </div>
                    <div class="stats-group-tot">
                        <p id="FCp">/200000000</p>
                    </div>
                </div>
                <div class="stats-score">
                    <div class="stats-group">
                        <div class="stats-group-real">
                            <p>16.9</p>
                        </div>
                        <div class="stats-group-tot">
                            <p id="FCp">Highest</p>
                        </div>
                    </div>
                    <div class="stats-group">
                        <div class="stats-group-real">
                            <p>11.3</p>
                        </div>
                        <div class="stats-group-tot">
                            <p id="FCp">lowest</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="one-stats-box" id="phi">
                <div class="rank">
                    <p>IN</p>
                </div>
                <div class="stats-up">
                    <div class="Rating">
                        <img src="../otherimg/phi.png" alt="{{Rating}}">
                    </div>
                    <div class="stats-group">
                        <div class="stats-group-real">
                            <p>189</p>
                        </div>
                        <div class="stats-group-tot">
                            <p id="FCp">/200</p>
                        </div>
                    </div>
                    <div class="stats-rating-group">
                        <div class="rating-group">
                            <div class="rating-value">
                                <p>189</p>
                            </div>
                            <div class="rating-tatle">
                                <p id="FCp">Cleared</p>
                            </div>
                        </div>
                        <div class="rating-group">
                            <div class="rating-value">
                                <p>189</p>
                            </div>
                            <div class="rating-tatle">
                                <p id="FCp">FC</p>
                            </div>
                        </div>
                        <div class="rating-group">
                            <div class="rating-value">
                                <p>189</p>
                            </div>
                            <div class="rating-tatle">
                                <p id="FCp">PHI</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="stats-group">
                    <div class="stats-group-real">
                        <p>189000000</p>
                    </div>
                    <div class="stats-group-tot">
                        <p id="FCp">/200000000</p>
                    </div>
                </div>
                <div class="stats-score">
                    <div class="stats-group">
                        <div class="stats-group-real">
                            <p>16.9</p>
                        </div>
                        <div class="stats-group-tot">
                            <p id="FCp">Highest</p>
                        </div>
                    </div>
                    <div class="stats-group">
                        <div class="stats-group-real">
                            <p>11.3</p>
                        </div>
                        <div class="stats-group-tot">
                            <p id="FCp">lowest</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="one-stats-box">
                <div class="rank">
                    <p>HD</p>
                </div>
                <div class="stats-up">
                    <div class="Rating">
                        <img src="../otherimg/V.png" alt="{{Rating}}">
                    </div>
                    <div class="stats-group">
                        <div class="stats-group-real">
                            <p>189</p>
                        </div>
                        <div class="stats-group-tot">
                            <p>/200</p>
                        </div>
                    </div>
                    <div class="stats-rating-group">
                        <div class="rating-group">
                            <div class="rating-value">
                                <p>189</p>
                            </div>
                            <div class="rating-tatle">
                                <p>Cleared</p>
                            </div>
                        </div>
                        <div class="rating-group">
                            <div class="rating-value">
                                <p>189</p>
                            </div>
                            <div class="rating-tatle">
                                <p>FC</p>
                            </div>
                        </div>
                        <div class="rating-group">
                            <div class="rating-value">
                                <p>189</p>
                            </div>
                            <div class="rating-tatle">
                                <p>PHI</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="stats-group">
                    <div class="stats-group-real">
                        <p>189000000</p>
                    </div>
                    <div class="stats-group-tot">
                        <p>/200000000</p>
                    </div>
                </div>
                <div class="stats-score">
                    <div class="stats-group">
                        <div class="stats-group-real">
                            <p>16.9</p>
                        </div>
                        <div class="stats-group-tot">
                            <p>Highest</p>
                        </div>
                    </div>
                    <div class="stats-group">
                        <div class="stats-group-real">
                            <p>11.3</p>
                        </div>
                        <div class="stats-group-tot">
                            <p>lowest</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="one-stats-box">
                <div class="rank">
                    <p>EZ</p>
                </div>
                <div class="stats-up">
                    <div class="Rating">
                        <img src="../otherimg/V.png" alt="{{Rating}}">
                    </div>
                    <div class="stats-group">
                        <div class="stats-group-real">
                            <p>189</p>
                        </div>
                        <div class="stats-group-tot">
                            <p>/200</p>
                        </div>
                    </div>
                    <div class="stats-rating-group">
                        <div class="rating-group">
                            <div class="rating-value">
                                <p>189</p>
                            </div>
                            <div class="rating-tatle">
                                <p>Cleared</p>
                            </div>
                        </div>
                        <div class="rating-group">
                            <div class="rating-value">
                                <p>189</p>
                            </div>
                            <div class="rating-tatle">
                                <p>FC</p>
                            </div>
                        </div>
                        <div class="rating-group">
                            <div class="rating-value">
                                <p>189</p>
                            </div>
                            <div class="rating-tatle">
                                <p>PHI</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="stats-group">
                    <div class="stats-group-real">
                        <p>189000000</p>
                    </div>
                    <div class="stats-group-tot">
                        <p>/200000000</p>
                    </div>
                </div>
                <div class="stats-score">
                    <div class="stats-group">
                        <div class="stats-group-real">
                            <p>16.9</p>
                        </div>
                        <div class="stats-group-tot">
                            <p>Highest</p>
                        </div>
                    </div>
                    <div class="stats-group">
                        <div class="stats-group-real">
                            <p>11.3</p>
                        </div>
                        <div class="stats-group-tot">
                            <p>lowest</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 曲目名称自适应name-box的宽度 -->
    <script>
        function adjustFontSize() {

            /**
             * @param {string} id id
             * @param {number} maxFontSize 最大字体大小
             */
            function work(id, maxFontSize = 50) {

                //获取song-name和composer滴元素
                var songName = document.getElementById(id)

                /*调整曲目名称字体大小*/
                var parentElement = songName.parentElement


                //如果字体宽度小于父元素宽度，则增大字体大小
                while (songName.scrollWidth < parentElement.offsetWidth && songName.scrollHeight < parentElement.offsetHeight) {
                    var style = window.getComputedStyle(songName, null).getPropertyValue('font-size')
                    var fontSize = parseFloat(style)

                    //检查是否已经达到最大字体大小
                    if (fontSize >= maxFontSize) {
                        break
                    }

                    songName.style.fontSize = (fontSize + 1) + "px"
                }

                // 如果字体宽度大于父元素宽度，则减小字体大小
                while (songName.scrollWidth > parentElement.offsetWidth || songName.scrollHeight > parentElement.offsetHeight) {
                    var style = window.getComputedStyle(songName, null).getPropertyValue('font-size')
                    var fontSize = parseFloat(style);
                    songName.style.fontSize = (fontSize - 1) + "px";
                }
            }
            work('Player_Id', 60)
            work('data', 60)
            work('profile', 30)
            work('CLG', 40)

        }
        window.onload = adjustFontSize
        window.onresize = adjustFontSize
    </script>
</body>